<template>
	<view class="place">
		<u-index-list :scrollTop="scrollTop" offset-top='0'>
			<!-- 头部 -->
			<view class="top-box">
				<u-icon name="heart" color="#818181" class="hearicon"></u-icon>
				<view class="top-title">热门城市</view>
				<view class="top-items">
					<block v-for="(item,i) in hotlist" :key="i">
						<view class="citys" @click="docity(item)">{{item}}</view>
					</block>
				</view>
			</view>

			<view v-for="(item, index) in citylist" :key="index">
				<u-index-anchor :index="item.first" :custom-style="{display:'none'}" />
				<view class="list-cell">
					<view class="listtitle">{{item.first}}</view>
					<block v-for="(items,i) in item.detail" :key="i">
						<view class="listitem" @click="docitytwo(items)">{{items.shortname}}</view>
					</block>
				</view>
			</view>
		</u-index-list>

		<!-- 	<view class="rigth">
			<view :class="['rigindex',{'rigaiv':i == aivindex}] " v-for="(item,i) in indexList" :key="i"
				@click="doindex(i)">{{item}}</view>
		</view> -->
	</view>
</template>

<script>
	import { ResCity } from '@/untils/api.js'
	export default {
		data() {
			return {
				hotlist: [],
				citylist: [],
				aivindex: 0,
				work_city: ''
				// scrollTop: 0,
				// indexList: ["#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",
				// 	"S", "T", "U", "V", "W", "X", "Y", "Z"
				// ]
			}
		},
		onLoad() {
			this.getCity()
		},
		methods: {
			docity(item) {
				this.work_city = item
				uni.$emit('upcity', this.work_city)
				uni.navigateBack()
			},
			docitytwo(items) {
				this.work_city = items.shortname
				uni.$emit('upcity', this.work_city)
				uni.navigateBack()
			},
			async getCity() {
				const { data: res } = await ResCity()
				this.hotlist = res.data.hot
				this.citylist = res.data.data
				console.log(res);
			},
			// doindex(i) {
			// 	this.aivindex = i
			// },
			// onPageScroll(e) {
			// 	this.scrollTop = e.scrollTop;
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.place {
		padding: 0 40rpx 0 73rpx;

		// 上
		.top-box {
			margin: 30rpx 0 50rpx;
			position: relative;

			.hearicon {
				position: absolute;
				top: 7rpx;
				left: -35rpx;
			}

			.top-title {
				color: #818181;
				font-size: 28rpx;
			}

			.top-items {
				display: flex;
				flex-wrap: wrap;

				.citys {
					width: 180rpx;
					height: 82rpx;
					text-align: center;
					line-height: 82rpx;
					background: #F5F5F5;
					border-radius: 6rpx;
					margin: 22rpx 31rpx 0 0;
				}
			}
		}


		// 索引列
		.list-cell {
			position: relative;


			.listtitle {
				position: absolute;
				top: 30rpx;
				left: -35rpx;
				color: #818181;
				font-size: 28rpx;
				margin-right: 20rpx;
			}

			.listitem {
				font-size: 32rpx;
				padding: 30rpx 0rpx;
				border-bottom: 1rpx solid #EEEEEE;
			}
		}

		.rigth {
			display: flex;
			flex-direction: column;
			position: fixed;
			top: 50rpx;
			right: 10rpx;

			.rigindex {
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				font-size: 24rpx;
				margin-bottom: 8rpx;
				text-align: center;
			}

			.rigaiv {
				color: #fff;
				border-radius: 50%;
				background-color: #01C3A8;
			}
		}
	}
</style>
